<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>用户登录</title>

    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Style -->
    <link rel="stylesheet" href='/static/css/style.css' type="text/css" media="all"/>
</head>

<body>
<!-- login form -->
<section class="w3l-login">
    <div class="overlay">
        <div class="wrapper">
            <div class="logo">
                <a class="brand-logo" href="/static/css/style.css">人脸情绪识别系统</a>
            </div>
            <div class="form-section">
                <h3>登录</h3>
                <!-- 添加成功消息显示 -->
                {% if success %}
                    <div class="success-message" style="color: green; margin-bottom: 15px;">
                        {{ success }}
                    </div>
                {% endif %}

                <!-- 添加错误消息显示 -->
                {% if error %}
                    <div class="error-message" style="color: red; margin-bottom: 15px;">
                        {{ error }}
                    </div>
                {% endif %}

                <form action="/login" method="post" class="signin-form" id="login-form">
                    <div class="form-input">
                        <input type="text" name="username" placeholder="username" required autofocus>
                    </div>
                    <div class="form-input">
                        <input type="password" name="password" placeholder="Password" required>
                    </div>
                    <label class="check-remaind">
                        <input type="checkbox">
                        <span class="checkmark"></span>
                        <p class="remember">记住我</p>
                    </label>
                    <button type="submit" class="btn btn-primary theme-button mt-4">登录</button>
                </form>
                <p class="signup">
                    没有帐户？<a href="/reload" class="signuplink">注册</a><br>
                    <a href="/reset_password" id="forget-link" class="signuplink">忘记用户名和密码？</a>
                </p>
            </div>
        </div>
    </div>
    <div class="copy-right">
        <p>&copy; 2025 人脸情绪识别系统. 保留所有权利</p>
    </div>
    <div id='stars'></div>
    <div id='stars2'></div>
    <div id='stars3'></div>

    <!-- copyright -->

    <!-- //copyright -->
</section>

<!-- /login form -->
<script>
    // 移除前端切换表单的JS逻辑，因为现在直接跳转到reset_password.html
</script>
</body>

</html>